<template>
  <div class="my-collapse">
    <!-- 章节一级目录 -->
    <div
      @click="change()"
      @mouseenter="showButton()"
      @mouseleave="hideButton()"
    >
      <el-row>
        <el-col :span="12">
          <div class="external-display">
            <h3 class="name">&nbsp;&nbsp; {{ chapter.title }}</h3>
          </div>
        </el-col>
        <el-col :span="12" v-if="role == 'teacher'">
          <div class="icon-box" ref="buttons">
            <div class="diBox" @click.stop>
              <div>
                <el-button type="primary" text @click.stop="showDig()"
                  >重命名</el-button
                >
                <el-popconfirm
                  confirm-button-text="是"
                  cancel-button-text="否"
                  icon-color="#626AEF"
                  title="确定要删除？"
                  @confirm="deleteFolder()"
                  @cancel="cancelEvent()"
                >
                  <template #reference>
                    <el-button type="primary" text>删除</el-button>
                  </template>
                </el-popconfirm>
              </div>
            </div>
            <div>
              <el-icon class="icon" ref="chapicon"><ArrowDownBold /></el-icon>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 章节二级目录 -->
    <transition name="fade">
      <div v-show="visable" class="child">
        <!-- 每一个实例他都应该有一个visable属性用来控制叶子是否显示，以及点击事件 调整显示 -->
        <el-empty
          class="empty"
          v-if="chapter.child.length == 0"
          :image-size="80"
          description="老师还没有添加小节内容哦~快去玩耍撒"
        ></el-empty>
        <div
          class="secondaryChapter"
          v-for="(item, index) in chapter.child"
          :key="item.sectionId"
          @click="chapterDetail(item)"
        >
          <el-row>
            <el-col :span="12" class="subTitle"
              ><div>{{ item.title }}</div></el-col
            >
            <el-col :span="12" v-if="role == 'teacher'">
              <div class="diBox" @click.stop style="text-align:right;margin-right:25px">
                <div>
                  <el-button type="primary" text @click.stop="showDig1(item)"
                    >重命名</el-button
                  >
                  <el-popconfirm
                    confirm-button-text="是"
                    cancel-button-text="否"
                    icon-color="#626AEF"
                    title="确定要删除？"
                    @confirm="deleteFolder(item)"
                    @cancel="cancelEvent()"
                  >
                    <template #reference>
                      <el-button type="primary" text>删除</el-button>
                    </template>
                  </el-popconfirm>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </transition>
    <el-dialog
      v-model="centerDialogVisible"
      title="Warning"
      width="30%"
      align-center
    >
      <el-input
        v-model="newChapterName"
        placeholder="请输入新章节名称"
      ></el-input>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancleDig()">取消</el-button>
          <el-button type="primary" @click="confirmDig()"
            >确定</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ElMessage } from "element-plus";
import { mapGetters } from "vuex";
export default {
  props: {
    chapter: {
      type: Object,
      default: {},
    },
  },
  // 数据源
  data() {
    return {
      visable: false,
      centerDialogVisible: false,
      newChapterName: "",
      flag:false,//信号用于同步是否是二级目录
      two:null,
    };
  },
  //生命周期函数---
  created() {
    // console.log(this.chapter)
  },
  //基本方法
  methods: {
    change() {
      this.visable = !this.visable;
      if (this.$refs.chapicon.$el.classList.contains("animation")) {
        this.$refs.chapicon.$el.classList.remove("animation");
      } else {
        this.$refs.chapicon.$el.classList.add("animation");
      }
    },
    //用于查看章节详情
    chapterDetail(index) {
      this.$router.push({
        name: "studentStudy",
        query: {
          courseId: index.courseId,
          chapterId: index.chapterId,
          sectionId: index.sectionId,
        },
      });
    },
    showButton() {
      this.$refs.buttons.style.display = "flex";
    },
    hideButton() {
      this.$refs.buttons.style.display = "none";
    },
    deleteFolder(item) {
      if(item)
      this.$emit("deleteOne", item);
      else
      this.$emit("deleteOne", this.chapter);
    },
    cancelEvent() {
      ElMessage({
        message: "取消成功！",
        type: "success",
        duration: 2000,
      });
    },
    showDig() {
      this.centerDialogVisible = true;
    },
    showDig1(item) {
      this.flag=true;
      this.centerDialogVisible = true;
      this.two=item
    },
    //取消对话框
    cancleDig(){
      this.centerDialogVisible = false;
      this.newChapterName=""
      this.two=null
      this.flag=false
    },
    //确定修改名称
    confirmDig(){
      //flag存在时候表示修改二级目录，否则表示的是以及目录
      if(this.flag)
      {
        this.$emit('reName',this.two,this.newChapterName)
      }else{
        this.$emit('reName',this.chapter,this.newChapterName) 
      }
      this.newChapterName="";
      this.centerDialogVisible=false;
      this.flag=false;
      this.two=null
    }
  },
  //计算类型方法和其他方法的区别：有缓存。以内存换时间，适用于频繁使用的计算
  computed: {
    ...mapGetters({
      role: "getRole",
    }),
  },
};
</script>

<style   scoped>
/*  针对于自定义组件的一些样式设置 */
.my-collapse {
  margin-top: 20px;
  cursor: pointer;
}
.el-row {
  min-height: 60px;
  text-overflow: ellipsis;
  background: rgb(247, 247, 247);
}
.el-row:hover {
  background: rgb(242, 242, 242);
}
.el-row{
  align-items: center;
}
.external-display .name {
  font-size: 18px;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 600;
  text-align: left;
  color: #333333;
  max-width: 80%;
  float: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0, 0, 0, 20px;
  user-select: none;
}
.icon-box {
  height: 100%;
  display: none;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  align-content: center;
}
.diBox1 {
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  align-content: center;
}
.icon {
  margin-right: 10px;
  cursor: pointer;
  transition: transform 0.5s;
}
.subTitle {
  display: flex;
  padding-left: 30px;
  align-items: center;
}
.animation {
  transform: rotate(180deg);
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.secondaryChapter {
  min-height: 30px;
  margin-top: 10px;
}
.secondaryChapter :hover {
  color: rgb(82, 204, 92);
  background: rgb(240, 246, 255);
}
</style>